<template>
  <div>
    <div class="ce-quan">
      <p class="ce-1">新用户注册</p>
      <p class="ce-2">很高兴您将成为商城的会员（注册只需一步）</p>
      <p class="ce-3">
        <input v-model="str" type="number" @blur="onblur()" placeholder="请输入手机号" max="11" />
        <!-- <span>必填</span> -->
        <span class="you">
          <van-icon name="phone-o" />
        </span>
      </p>
      <p class="ce-3">
        <input type="text" placeholder="密码" v-show="isShow" v-model="password" />
        <input type="password" placeholder="密码" v-show="!isShow" v-model="inputvalue" />
        <!-- <span >必填</span> -->
        <span class="you" v-show="!isShow" @click="dain" style="cursor: pointer;">
          <van-icon name="closed-eye" />
        </span>
        <span class="you" v-show="isShow" @click="dian" style="cursor: pointer;">
          <van-icon name="eye-o" />
        </span>
      </p>
      <p class="ce-3">
        <input type="text" placeholder="确认密码" v-show="iShow" v-model="password2" />
        <input type="password" placeholder="确认密码" v-show="!iShow" v-model="inputvalue2" />
        <!-- <span >必填</span> -->
        <span class="you" v-show="!iShow" @click="din" style="cursor: pointer;" @blur="align()">
          <van-icon name="closed-eye" />
        </span>
        <span class="you" v-show="iShow" @click="dni" style="cursor: pointer;"  @blur="align()">
          <van-icon name="eye-o" />
        </span>
      </p>
      <p class="ce-3">
        <input type="text" placeholder="用户名" />
        <!-- <span>必填</span> -->
        <span class="you">
          <van-icon name="manager-o" />
        </span>
      </p>
      <p class="ce-4">
        <input type="text">
        <img src="https://api.it120.cc/small4/verification/pic/get " alt="">
      </p>
      <!-- <div>   
                 <van-cell is-link @click="showPopup">展示弹出层</van-cell>
                     <van-popup v-model="show" position="bottom" :style="{ height: '30%' }" >
                     <van-area title="标题"  value="110101" :area-list="areaList"/>
            
                       </van-popup>
      </div>-->
      <!-- <van-area title="标题"  value="110101" :area-list="areaList"/> -->
      <p class="ce-3">
        <input type="text" placeholder="地址" />
        <!-- <span>必填</span> -->
        <!-- <span class="you"><van-icon name="manager-o" /></span> -->
      </p>


      <p class="ce-4">
        <input type="text"  />
        <Button class="counterButtton"/>
      </p>

      <div>
        <span class="deng">注册</span>
      </div>

      <div class="ce" @click="three">
        <p class="ce-5">已有账号？ 立即登录</p>
      </div>
    </div>
  </div>
</template>
<script>
import phone from "../utils/phone"
import Button from "../components/CounterButton"
export default {
  data() {
    return {
      isShow: false,
      iShow: false,
      show: false,
      password: "",
      inputvalue: "",
       password2: "",
      inputvalue2: "",
      str:'',
      phoneValue:false
    };
  },
  components:{
    Button
  },
  methods: {
    dain() {
      this.isShow = true;
       this.password=this.inputvalue

    },
    dian() {
      this.isShow = false;
            this.inputvalue=this.password

    },
    din() {
      this.iShow = true;
      this.password2=this.inputvalue2
     
    },
    dni() {
      this.iShow = false;
            this.inputvalue2=this.password2

    },
  onblur(){
           this.phoneValue=phone.animate(this.str)
       },
    align(){
      if(this.password2==this.password){
        return
      }else{
        alert("本次密码与上次输入不一致")
      }
    },
    showPopup() {
      this.show = true;
    },
    three() {
      this.$router.push({
        path: "/deng"
      });
    }
  }
};
</script>
<style>
.ce-quan {
  width: 90%;
  height: 13rem;
  border: 1px solid #eee;
  margin: 0 auto;
  margin-top: 0.5rem;
}
.ce-1 {
  font-size: 0.4rem;
  margin-top: 0.44rem;
  margin-left: 0.5rem;
}
.ce-2 {
  font-size: 0.25rem;
  margin-top: 0.44rem;
  margin-left: 0.5rem;

  color: gray;
}
.ce-3 {
  width: 5rem;
  height: 0.86rem;
  border-radius: 0.12rem;
  background: #f5f5f5;
  /* border: 1px solid red; */
  margin-top: 0.44rem;
  margin-left: 0.5rem;
}
.ce-4 {
  width: 5rem;
  height: 0.86rem;
  border-radius: 0.12rem;
  background: #f5f5f5;
  /* border: 1px solid red; */
  margin-top: 0.44rem;
  margin-left: 0.5rem;
}
.ce-4 input {
  width: 1.5rem;
  outline: none;
  border: 0rem solid red;
  line-height: 0.76rem;
  /* margin-top: 0.27rem; */
  float: left;
  background: #f5f5f5;
  /* margin-left: 0.1rem; */
}
.ce-4 img{
  width: 2.5rem;
  height: 100%;
  float: right;
  /* margin-top: -0.53rem; */
}
.ce-3 input {
  outline: none;
  border: 0rem solid red;
  /* line-height: 0.76rem; */
  margin-top: 0.27rem;
  background: #f5f5f5;
  margin-left: 0.1rem;
}
.deng {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  border-radius: 0.1rem;
  color: white;
  background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
  position: relative;
  top: 1rem;
  left: 1.6rem;
}
.you {
  padding-left: 0.7rem;
}
.ce-5 {
  color: #549ff9;
  margin-left: 0.2rem;
  margin-top: 0.5rem;
}
.ce {
  position: relative;
  top: 1.5rem;
  left: 1.6rem;
}
.counterButtton{
  width: 1rem;
  /* height: 0.6rem; */
  text-align: center;
  float: right;
  display: flex;
  align-items: center;
}
</style>